<template>
  <div>
    <h1>商品管理</h1>

    <!-- 搜索框 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
        <el-cascader :options="options" clearable @change="onchange">
        </el-cascader>
      </el-form-item>
      <el-form-item label="">
        <el-input
          v-model="input"
          class="input"
          placeholder="请输入内容"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="Screens">查询</el-button>
      </el-form-item>
      <el-button
        type="primary"
        round
        icon="el-icon-plus"
        class="add"
        @click="adds"
        >添加</el-button
      >
    </el-form>

    <!-- 添加 -->

    <!-- 表格 -->
    <el-table :data="list" stripe style="width: 100%" border>
      <el-table-column prop="id" label="id" width="200"> </el-table-column>
      <el-table-column prop="name" label="信息" width="200px">
      </el-table-column>
      <el-table-column prop="price" label="价格" width="200px">
      </el-table-column>
      <el-table-column prop="status" label="状态" width="200px">
        <template slot-scope="scope">
          <span>{{ scope.row.status | types }}</span>
          <el-button
            size="mini"
            type="warning"
            style="float: right"
            class="btna"
            @click.prevent="Undercomm(scope.row)"
            >{{ scope.row.status | types2 }}</el-button
          >
        </template>
      </el-table-column>
        <!-- 商品页的 图片 需要插槽 -->
      <el-table-column prop="mainImage" label="图片" width="200px">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.imageHost+scope.row.mainImage" 
          ></el-image>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="250px">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="details(scope.row.id)"
            >查看</el-button
          >
          <el-button type="text" size="small" @click="edits(scope.row.id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[5, 10, 15, 20]"
      :total="total"
      :page-size="size"
      :current-page="page"
      @current-change="change"
      @size-change="change1"
    >
    </el-pagination>
  </div>
</template>

<script>
import { DITYLIST, UNder, screen } from "../request/http";
export default {
  data() {
    return {
      list: [],
      size: 10,
      page: 1,
      total: 0,
      options: [
        {
          value: "id",
          label: "按id查询",
        },
        {
          value: "name",
          label: "按name查询",
        },
      ],
      input: "",
    };
  },
  mounted() {
    this.ditylist(); //挂载
    // this.Undercomm(); //挂载 上下架
  },
  methods: {
    async ditylist() {
      const { data: res } = await DITYLIST(`/product/list.do`, {
        pageSize: this.size,
        pageNum: this.page,
      });
      this.list = res.data.list;
      this.total = res.data.total;
      // console.log(res);
    },
    //分页器
    change(val) {
      this.page = val;
      this.ditylist(); //挂载
    },
    change1(a) {
      this.size = a;
      this.ditylist(); //挂载
    },

    //查看 详情页
    details(id) {
      this.$router.push({ path: "/detail", query: { id } });
      // console.log(id);
    },

    //编辑
    edits(id) {
      this.$router.push({ path: "/edit", query: { id } });
    },

    // 状态的点击事件
    Undercomm(v) {
      console.log(v);
      this.$confirm("此操作将上架商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          UNder(`/product/set_sale_status.do?`, {
            productId: v.id,
            status: v.status == 1 ? 2 : 1,
          }).then((res1) => {
            console.log(res1.data);
            DITYLIST(`/product/list.do`, { pageNum: this.page }).then((res) => {
              console.log(res);
              this.list = res.data.data.list;
              this.total = res.data.data.total;
            });
          });

          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },

    //添加的跳转
    adds() {
      this.$router.push({ path: "/add_dity" });
    },

    //搜索
    onchange(val) {
      console.log(val);
      this.msg = val;
    },
    //搜索按钮
    Screens() {
      var index = this.msg[0];
      console.log(index);
      console.log(this.input);
      if (index == "name") {
        this.type = "productName";
        screen({ [this.type]: this.input }).then((res) => {
          console.log(res);
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        });
      }
      if (index == "id") {
        this.type = "productId";
        screen({ [this.type]: this.input }).then((res) => {
          console.log(res);
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        });
      }
    },
  },
  //过滤器 状态的上架下架
  filters: {
    types(val) {
      return val == 1 ? "在售" : "已下架";
    },
    types2(val) {
      return val == 2 ? "上架" : "下架";
    },
  },
};
</script>


<style lang="scss">
.add {
  float: right;
  margin-right: 50px;
}
</style>